<template>
  <div>
    <div class="colorBox"
         :style="{ background: 'rgb(' + r + ',' + g + ',' + b + ')' }"></div>
    <div>
      R:<input min="0"
             type="range"
             max="250"
             v-model="r" />
      G:<input min="0"
             type="range"
             max="250"
             v-model="g" />
      B:<input min="0"
             type="range"
             max="250"
             v-model="b" />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      r: 100,
      g: 200,
      b: 123
    }
  }
}
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>
